import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { toast } from 'react-toastify';
import { 
  Twitter, 
  Linkedin, 
  Github, 
  Mail, 
  ArrowRight,
  Heart
} from 'lucide-react';

const newsletterSchema = z.object({
  email: z.string().email('Please enter a valid email address')
});

const Footer = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset
  } = useForm({
    resolver: zodResolver(newsletterSchema)
  });

  const onSubmit = async (data) => {
    setIsSubmitting(true);
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    console.log('Newsletter subscription:', data);
    toast.success('Successfully subscribed to our newsletter!');
    reset();
    setIsSubmitting(false);
  };

  const footerLinks = {
    产品: [
      { name: '功能', href: '#features' },
      { name: '定价', href: '#business' },
      { name: 'API文档', href: '#' },
      { name: '集成', href: '#' },
      { name: '更新日志', href: '#' }
    ],
    公司: [
      { name: '关于我们', href: '#' },
      { name: '招聘', href: '#' },
      { name: '博客', href: '#' },
      { name: '新闻资料', href: '#' },
      { name: '联系我们', href: '#contact' }
    ],
    资源: [
      { name: '帮助中心', href: '#' },
      { name: '社区', href: '#' },
      { name: '教程', href: '#' },
      { name: '网络研讨会', href: '#' },
      { name: '案例研究', href: '#portfolio' }
    ],
    法律: [
      { name: '隐私政策', href: '#' },
      { name: '服务条款', href: '#' },
      { name: 'Cookie政策', href: '#' },
      { name: 'GDPR', href: '#' },
      { name: '安全', href: '#' }
    ]
  };

  const socialLinks = [
    { name: 'Twitter', icon: Twitter, href: 'https://twitter.com' },
    { name: 'LinkedIn', icon: Linkedin, href: 'https://linkedin.com' },
    { name: 'GitHub', icon: Github, href: 'https://github.com' },
    { name: 'Email', icon: Mail, href: 'mailto:hello@saasflow.com' }
  ];

  return (
    <footer className="bg-zinc-900 text-white">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Newsletter Section */}
        <motion.div
          className="py-16 border-b border-zinc-800"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
        >
          <div className="max-w-4xl mx-auto text-center">
            <h3 className="text-3xl md:text-4xl font-bold mb-4">
              通过
              <span className="text-[#345aff]"> SaaSFlow</span>保持更新
            </h3>
            <p className="text-xl text-zinc-400 mb-8">
              获取最新更新、技巧和见解，直接发送到您的收件箱。
            </p>

            <form onSubmit={handleSubmit(onSubmit)} className="max-w-md mx-auto">
              <div className="flex flex-col sm:flex-row gap-4">
                <div className="flex-1">
                  <motion.input
                    type="email"
                    placeholder="输入您的邮箱"
                    className={`w-full px-6 py-4 bg-zinc-800 border-2 focus:outline-none focus:ring-0 transition-all duration-200 ${
                      errors.email 
                        ? 'border-red-400 focus:border-red-500' 
                        : 'border-zinc-700 focus:border-blue-500'
                    }`}
                    {...register('email')}
                    whileFocus={{ scale: 1.02 }}
                  />
                  {errors.email && (
                    <motion.p
                      className="text-red-400 text-sm mt-2 text-left"
                      initial={{ opacity: 0, y: -10 }}
                      animate={{ opacity: 1, y: 0 }}
                    >
                      {errors.email.message}
                    </motion.p>
                  )}
                </div>

                <motion.button
                  type="submit"
                  disabled={isSubmitting}
                  className="bg-[#345aff] text-white px-8 py-4 font-semibold transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
                  whileHover={{ scale: isSubmitting ? 1 : 1.05 }}
                  whileTap={{ scale: isSubmitting ? 1 : 0.95 }}
                >
                  {isSubmitting ? (
                    <div className="w-5 h-5 border-2 border-white border-t-transparent animate-spin"></div>
                  ) : (
                    <>
                      订阅
                      <ArrowRight className="w-5 h-5 ml-2" />
                    </>
                  )}
                </motion.button>
              </div>
            </form>
          </div>
        </motion.div>

        {/* Main Footer Content */}
        <div className="py-16">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8">
            {/* Brand Section */}
            <motion.div
              className="lg:col-span-2"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <motion.h2
                className="text-3xl font-bold text-blue-400 font-mono mb-4"
                whileHover={{ scale: 1.05 }}
              >
                SaaSFlow
              </motion.h2>
              <p className="text-zinc-400 mb-6 leading-relaxed">
                通过我们的人工智能驱动型SaaS平台转变您的工作流程。
                借助企业级安全性和性能，无限扩展您的业务。
              </p>

              {/* Social Links */}
              <div className="flex space-x-4">
                {socialLinks.map((social) => (
                  <motion.a
                    key={social.name}
                    href={social.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-10 h-10 bg-zinc-800 flex items-center justify-center hover:bg-blue-600 transition-all duration-200"
                    whileHover={{ scale: 1.1, y: -2 }}
                    whileTap={{ scale: 0.95 }}
                    aria-label={social.name}
                  >
                    <social.icon className="w-5 h-5" />
                  </motion.a>
                ))}
              </div>
            </motion.div>

            {/* Footer Links */}
            {Object.entries(footerLinks).map(([category, links], index) => (
              <motion.div
                key={category}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8, delay: index * 0.1 }}
              >
                <h4 className="font-semibold text-white mb-4">{category}</h4>
                <ul className="space-y-3">
                  {links.map((link) => (
                    <li key={link.name}>
                      <motion.a
                        href={link.href}
                        className="text-zinc-400 hover:text-white transition-colors duration-200"
                        whileHover={{ x: 5 }}
                      >
                        {link.name}
                      </motion.a>
                    </li>
                  ))}
                </ul>
              </motion.div>
            ))}
          </div>
        </div>

        {/* Copyright */}
        <div className="py-6 border-t border-zinc-800">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <motion.p
              className="text-zinc-500 text-sm"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              © {new Date().getFullYear()} SaaSFlow. 保留所有权利。
            </motion.p>
            
            <motion.div
              className="flex items-center mt-4 md:mt-0"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              <span className="text-zinc-500 text-sm mr-2">使用</span>
              <Heart className="w-4 h-4 text-red-500 mx-1" />
              <span className="text-zinc-500 text-sm ml-2">精心制作</span>
            </motion.div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;